<!DOCTYPE html PUBLIC" -//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
        maximum-scale=1.0, user-scalable=no" />
  <title>页面行情(K线图)</title>
  <!-- 加载资源 -->
  <link rel="stylesheet" href="static/css/main.css" />
  <link rel="stylesheet" href="static/css/icons.css" />
  <link rel="stylesheet" href="static/css/index.css" />
</head>

<body>
  <script src="static/js/jquery.min.js"></script>
  <script src="plugs/laydate/laydate.js"></script>
  <script src="datas/chan.js"></script>
  <script src="datas/drawEleDatas.js"></script>
  <script src="datas/targetData.js"></script>
  <script src="dist/bundle.build.js"></script>
  <!-- <script src="gotopChart_backup_finaly.js"></script> -->
  <!-- <script src="gotopChart.network.js"></script> -->
  <!-- <script src="gotopChart.socket.js"></script> -->
  <script src="indicators/indicatorFormula.js"></script>
  <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>

  <div id="kline" style="width: 1200px;height:800px;position: relative;"></div>
  <!-- <div class="opt-bottom-container">
    <div class="start-transaction" id="start-transaction"><span class="iconfont icon-start"
        style="margin-right: 10px"></span>开始交易</div>
    <div class="stop-transaction" id="stop-transaction"><span class="iconfont icon-stop"
        style="margin-right:10px"></span>停止交易</div>
    <div class="clean-position" id="clean-position">清空仓位</div>
    <div class="log-container"></div>
  </div> -->
  <script>
    var symbol = 'BTCUSDT'
    var mode = 1 // 0 离线、1 在线
    var divKline = document.getElementById('kline')
    var chart = GoTopChart.Init(divKline)

    var options = {
      Window:
        [
          {
            Index: 'MACD',
            Type: 'system',
            RequestType: 'local',
            DataType: 1,
            Location: 'pair',
            Precision: 2,
            Params: {
              FastLength: 12,
              SlowLength: 26
            },
            Key: ['DIFF', 'DEA', 'MACD'],
            Plots: [{ id: 'DIFF', type: 'line' }, { id: 'DEA', type: 'line' }, { id: 'MACD', type: 'rect' }],
            Style: {
              DIFF: {
                name: 'DIFF',
                color: '#0094ff'
              },
              DEA: {
                name: 'DEA',
                color: '#ff6a00'
              },
              MACD: {
                name: 'MACD',
                color: {
                  up: '#26a69a',
                  down: '#ef5350'
                }
              }
            }
          }, {
            Index: 'CHAN',
            Type: 'custom',
            RequestType: 'network',
            DataType: 0,
            Location: 'main',
            Precision: 2,
            Params: {

            },
            Key: ['BI', 'DUAN', 'CENTRE'],
            Plots: [{ id: 'BI', type: 'line' }, { id: 'DUAN', type: 'line' }, { id: 'CENTRE', type: 'rect' }],
            Style: {
              BI: {
                name: 'BI',
                lineWidth: 1,
                color: '#ffff00'
              },
              DUAN: {
                name: 'DUAN',
                lineWidth: 2,
                color: '#26decd'
              },
              CENTRE: {
                name: 'CENTRE',
                color: '#4985e780'
              }
            }
          }
        ],
      Charts: [
        {
          Name: 'BTC图表',
          ID: 'btc-charts',
          Symbol: symbol,
          Mode: mode,
          Start: 1613939700000, // 数据开始时间；当图表 mode 为 0 时有效
          End: null, // 数据结束时间；当 MaxRequestDataCount <1000 时有效

          KLine:
          {
            Period: "5m",
            MaxRequestDataCount: 1000,
          },
          drawEleDatasObj: drawEleDatasObj,
          targetData: target
        },
        {
          Name: 'BNB图表',
          ID: 'bnb-charts',
          Symbol: 'BNBUSDT',
          Mode: mode,
          Start: 1613939700000, // 数据开始时间；当图表 mode 为 0 时有效
          End: null, // 数据结束时间；当 MaxRequestDataCount <1000 时有效

          KLine:
          {
            Period: "1m",
            MaxRequestDataCount: 1000,
          },
          drawEleDatasObj: drawEleDatasObj,
          targetData: target
        }
      ],


      PeriodConfig:
        [
          {
            type: 'm',
            text: '分钟',
            item: [1, 3, 5, 15, 30, 45]
          }, {
            type: 'h',
            text: '小时',
            item: [1, 2, 3, 4]
          }, {
            type: 'd',
            text: '天',
            item: [1, 7]
          }
        ],

      Border:
      {
        Left: 5,
        Right: 5,
        Bottom: 5,
        Top: 5
      },

      drawEle: [
        {
          type: 'line',
        },
        {
          Location: 'kLine',
          type: 'rect',
        },
        {
          type: 'signals',
        }
      ],
    }

    $(window).resize(resizeCanvas)
    // window.onload = function () {
    //   var height = document.body.clientHeight
    //   var width = document.body.clientWidth

    //   divKline.style.width = (width) + 'px';
    //   divKline.style.height = (height) + 'px';
    //   chart.OnSize();
    //   chart.SetOption(options)
    // }

    function resizeCanvas() {
      var height = $(window).height()
      var width = $(window).width()

      divKline.style.top = 0 + 'px'
      divKline.style.left = 0 + 'px'
      divKline.style.width = (width) + 'px';
      divKline.style.height = (height) + 'px';
      chart.OnSize();
      chart.SetOption(options)
    }

    $(function () {
      var height = $(window).height()
      var width = $(window).width()

      divKline.style.width = (width) + 'px';
      divKline.style.height = (height) + 'px';
      chart.OnSize();
      chart.SetOption(options)
    })
    laydate.render({
      elem: '#date-d', //指定元素
      type: 'date',
      theme: '#2c3450',
      trigger: 'click'
    });
    laydate.render({
      elem: '#time-d', //指定元素
      type: 'time',
      theme: '#2c3450',
    });

    // $('#start-transaction').click(function (e) {

    // })
    // $('#stop-transaction').click(function (e) {

    // })
    // $('#clean-position').click(function (e) {

    // })


    function startTransaction() {

    }

    function stopTransaction() {

    }

    function cleanPosition() {

    }

  </script>
</body>

</html>